<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
        <div class="form-item-row">
            <a-form-item
                label="任务链接"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                <a-input
                v-decorator="[
                    'task_url',
                    {rules: [{ required: true }]}
                ]"
                name="task_url"
                placeholder="任务链接" />
            </a-form-item>
            <a-form-item
                label="任务需求"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                <a-input
                v-decorator="[
                    'task_note',
                    {rules: [{ required: true }]}
                ]"
                name="task_note"
                placeholder="任务需求" />
            </a-form-item>
        </div>
        <div class="form-item-row">
            <a-form-item
                label="任务进度数量"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                <a-input    
                v-decorator="[
                    'task_progress',
                    {rules: [{ required: true }]}
                ]"
                name="task_progress"
                placeholder="任务数量" />
            </a-form-item>
            <a-form-item
                label="奖励积分数"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                <a-input
                v-decorator="[
                    'task_integral',
                    {rules: [{ required: true }]}
                ]"
                name="task_integral"
                placeholder="奖励积分" />
            </a-form-item>
        </div>
       <div class="form-item-row">  
            <a-form-item
                label="发布人"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                <a-input
                v-decorator="[
                    'release_name',
                    {rules: [{ required: true }]}
                ]"
                name="release_name"
                placeholder="发布人" />
            </a-form-item>
            <a-form-item
                label="交付时间"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                <a-date-picker  v-decorator="['delivery_time',  {rules: [{ required: true }]}]" />
            </a-form-item>
            
        </div>
        <div class="form-item-row">
            <a-form-item
                label="任务类型"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                <a-checkbox-group @change="onTypeChange"  v-decorator="['task_type',  {rules: [{ required: true }]}]">
                    <a-row>
                    <a-col :span="8"><a-checkbox value="0">点赞</a-checkbox></a-col>
                    <a-col :span="8"><a-checkbox value="1">关注</a-checkbox></a-col>
                    <a-col :span="8"><a-checkbox value="2">评论</a-checkbox></a-col>
                    </a-row>
                </a-checkbox-group>
            </a-form-item>
            <a-form-item>
            </a-form-item>
        </div>
         
        <a-form-item
            :wrapperCol="{ span: 24 }"
            style="text-align: center"
        >
            <a-button htmlType="submit" type="primary" style="margin-right:30px;">提交</a-button>
            <a-button style="margin-left: 8px" @click="goBack()">返回</a-button>
        </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import moment from 'moment'
import { taskRelease } from '@/api/getData'
export default {
  name: 'TaskTypeDetail',
  data () {
    return {
      description: '',
      value: 1,

      // form
      form: this.$form.createForm(this)

    }
  },
  methods: {
    goBack(){
        this.$router.back()
    },  
    onTypeChange(){

    },  
    // handler
    handleSubmit (e) {
        let that = this;
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
        //   console.log('Received values of form: ', values)
         this.$confirm({
            title: '确认新增任务?',
            content: '',
            onOk() {
                let parame = {},task_type = '';
                parame.task_url = values.task_url
                parame.video_url = values.video_url
                parame.home_url = values.home_url
                parame.task_note = values.task_note
                parame.task_progress = values.task_progress
                parame.task_integral = values.task_integral
                parame.release_name = values.release_name
                values.task_type.map(item=>{
                    task_type += item + ','
                })
                parame.task_type = task_type.slice(0,-1)
                parame.delivery_time = moment(values.delivery_time).format("YYYY-MM-DD hh:mm:ss");  

                taskRelease(parame).then(res=>{
                    console.log(res)
                    if(res.code == 200){
                       that.$message.info('新增成功');
                    }
                })
            },
            onCancel() {}
        });
          
        }
      })
    }
  }
}
</script>

<style scoped>
.form-item-row{
    display: flex;
}
.form-item-row>div{
    flex: 1;
}
.ant-checkbox-group{
    line-height: 40px !important;
}
</style>
